<template>
	<view class="page-container">
		<scroll-view scroll-y class="page-scroll" refresher-enabled @refresherrefresh="onRefresh">
			<!-- 用户信息区域 -->
			<view class="user-section">
				<view class="user-info">
					<image class="avatar" :src="userInfo.avatar || 'https://202231117.oss-cn-beijing.aliyuncs.com/图像1.jpg'" mode="aspectFill"></image>
					<view class="user-detail">
						<text class="nickname">{{ userInfo.nickname || '未登录' }}</text>
						<text class="user-id">ID: {{ userInfo.userId || '--' }}</text>
					</view>
				</view>
				<view class="user-stats">
					<view class="stat-item">
						<text class="stat-value">{{ userInfo.followers || 0 }}</text>
						<text class="stat-label">关注者</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">{{ userInfo.following || 0 }}</text>
						<text class="stat-label">关注</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">{{ userInfo.likes || 0 }}</text>
						<text class="stat-label">获赞</text>
					</view>
				</view>
			</view>
			
			<!-- 主要内容区域 -->
			<view class="content">
				<!-- 功能入口区域 -->
				<view class="features-section">
					<view class="section-title">
						<text class="title-text">功能中心</text>
						<text class="title-desc">更多精彩功能等你探索</text>
					</view>
					<view class="features-grid">
						<view class="feature-item" v-for="(item, index) in features" :key="index" @click="navigateTo(item.url)">
							<view class="feature-icon" :style="{ background: item.bgColor }">
								<text class="icon">{{ item.icon }}</text>
							</view>
							<text class="feature-name">{{ item.name }}</text>
						</view>
					</view>
				</view>
				
				<!-- 活动展示区域 -->
				<view class="activities-section">
					<view class="section-title">
						<text class="title-text">热门活动</text>
						<text class="title-desc">参与互动赢取好礼</text>
					</view>
					<scroll-view class="activities-scroll" scroll-x>
						<view class="activity-card" v-for="(item, index) in activities" :key="index" @click="viewActivity(item)">
							<image class="activity-image" :src="item.image" mode="aspectFill"></image>
							<view class="activity-info">
								<text class="activity-title">{{ item.title }}</text>
								<text class="activity-time">{{ item.time }}</text>
							</view>
						</view>
					</scroll-view>
				</view>
				
				<!-- 推荐内容区域 -->
				<view class="recommend-section">
					<view class="section-title">
						<text class="title-text">为你推荐</text>
						<text class="title-desc">发现更多精彩内容</text>
					</view>
					<view class="recommend-list">
						<view class="recommend-item" v-for="(item, index) in recommends" :key="index" @click="viewRecommend(item)">
							<image class="recommend-image" :src="item.image" mode="aspectFill"></image>
							<view class="recommend-info">
								<text class="recommend-title">{{ item.title }}</text>
								<text class="recommend-desc">{{ item.description }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			userInfo: {
				avatar: '',
				nickname: '',
				userId: '',
				followers: 0,
				following: 0,
				likes: 0
			},
			features: [
				{ name: '会员中心', icon: '👑', bgColor: '#FFD700', url: '/pages/memberCenter/memberCenter' },
				{ name: '智能匹配', icon: '❤️', bgColor: '#FF69B4', url: '/pages/match/match' },
				{ name: '线下活动', icon: '🎉', bgColor: '#FF6B6B', url: '/pages/find/find' },
				{ name: '消息中心', icon: '💌', bgColor: '#4CAF50', url: '/pages/messageCenter/messageCenter' },
				{ name: '我的收藏', icon: '⭐', bgColor: '#FFA500', url: '/pages/collection/collection' },
				{ name: '设置', icon: '⚙️', bgColor: '#9C27B0', url: '/pages/settings/settings' }
			],
			activities: [
				{
					title: '周末派对',
					time: '本周六 19:00',
					image: 'https://202231117.oss-cn-beijing.aliyuncs.com/周末派对.jpg'
				},
				{
					title: '美食节',
					time: '下周三 12:00',
					image: 'https://202231117.oss-cn-beijing.aliyuncs.com/美食节.jpg'
				},
				{
					title: '户外运动',
					time: '下周日 09:00',
					image: 'https://202231117.oss-cn-beijing.aliyuncs.com/户外运动.jpg'
				}
			],
			recommends: [
				{
					title: '如何提升个人魅力',
					description: '专业导师为你讲解提升个人魅力的秘诀',
					image: 'https://202231117.oss-cn-beijing.aliyuncs.com/个人魅力.jpg'
				},
				{
					title: '约会技巧分享',
					description: '资深情感专家分享约会技巧',
					image: 'https://202231117.oss-cn-beijing.aliyuncs.com/约会.jpg'
				}
			]
		}
	},
	methods: {
		navigateTo(url) {
			uni.navigateTo({
				url: url
			})
		},
		
		viewActivity(activity) {
			uni.navigateTo({
				url: `/pages/activity/detail?id=${activity.id}`
			})
		},
		
		viewRecommend(recommend) {
			uni.navigateTo({
				url: `/pages/recommend/detail?id=${recommend.id}`
			})
		},
		onRefresh() {
			// 实现下拉刷新
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 1000)
		}
	},
	onLoad() {
		// TODO: 获取用户信息
	}
}
</script>

<style lang="scss">
.page-container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background: #f8f9fa;
	padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
	
	.page-scroll {
		flex: 1;
		height: 100%;
	}
	
	.user-section {
		padding: 20rpx 30rpx;
		background: linear-gradient(135deg, #f69489, #ff6b6b);
		color: #fff;
		border-radius: 0 0 30rpx 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(246, 148, 137, 0.3);
		
		.user-info {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			
			.avatar {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				border: 4rpx solid rgba(255, 255, 255, 0.3);
				margin-right: 20rpx;
			}
			
			.user-detail {
				flex: 1;
				
				.nickname {
					font-size: 32rpx;
					font-weight: 600;
					margin-bottom: 4rpx;
					display: block;
				}
				
				.user-id {
					font-size: 24rpx;
					opacity: 0.8;
				}
			}
		}
		
		.user-stats {
			display: flex;
			justify-content: space-around;
			padding-top: 16rpx;
			border-top: 2rpx solid rgba(255, 255, 255, 0.2);
			
			.stat-item {
				text-align: center;
				
				.stat-value {
					font-size: 28rpx;
					font-weight: 600;
					display: block;
					margin-bottom: 4rpx;
				}
				
				.stat-label {
					font-size: 24rpx;
					opacity: 0.8;
				}
			}
		}
	}
	
	.content {
		padding: 20rpx;
		
		.section-title {
			margin-bottom: 16rpx;
			
			.title-text {
				font-size: 28rpx;
				font-weight: 600;
				color: #333;
				display: block;
				margin-bottom: 4rpx;
			}
			
			.title-desc {
				font-size: 24rpx;
				color: #999;
			}
		}
		
		.features-section {
			margin-bottom: 30rpx;
			
			.features-grid {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 20rpx;
				padding: 10rpx 0;
				
				.feature-item {
					text-align: center;
					
					.feature-icon {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						margin: 0 auto 8rpx;
						box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
						transition: transform 0.3s;
						
						&:active {
							transform: scale(0.95);
						}
						
						.icon {
							font-size: 36rpx;
						}
					}
					
					.feature-name {
						font-size: 24rpx;
						color: #666;
					}
				}
			}
		}
		
		.activities-section {
			margin-bottom: 30rpx;
			
			.activities-scroll {
				white-space: nowrap;
				margin: 20rpx 0;
				
				.activity-card {
					display: inline-block;
					width: 300rpx;
					margin-right: 20rpx;
					background: #fff;
					border-radius: 12rpx;
					overflow: hidden;
					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
					
					&:last-child {
						margin-right: 30rpx;
					}
					
					.activity-image {
						width: 100%;
						height: 160rpx;
					}
					
					.activity-info {
						padding: 12rpx;
						
						.activity-title {
							font-size: 26rpx;
							font-weight: 500;
							color: #333;
							display: block;
							margin-bottom: 4rpx;
						}
						
						.activity-time {
							font-size: 22rpx;
							color: #999;
						}
					}
				}
			}
		}
		
		.recommend-section {
			margin-bottom: 40rpx;
			
			.recommend-list {
				.recommend-item {
					display: flex;
					background: #fff;
					border-radius: 12rpx;
					padding: 16rpx;
					margin-bottom: 20rpx;
					box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
					
					&:last-child {
						margin-bottom: 0;
					}
					
					.recommend-image {
						width: 180rpx;
						height: 140rpx;
						border-radius: 8rpx;
						margin-right: 16rpx;
					}
					
					.recommend-info {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						
						.recommend-title {
							font-size: 26rpx;
							font-weight: 500;
							color: #333;
							display: block;
						}
						
						.recommend-desc {
							font-size: 22rpx;
							color: #999;
							display: block;
						}
					}
				}
			}
		}
	}
}

// 修改tabbar样式
::v-deep .tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 120rpx;
	background: #fff;
	z-index: 100;
}
</style>